<template>
  <div class="app-container customer-management-wrap">
    <!--    <div class="page-header">-->
    <!--      <div class="page-title">-->
    <!--        <span class="title">授信管理</span>-->
    <!--      </div>-->
    <!--    </div>-->
    <div class="mainBox">
      <div class="leftBox shadowShell">
        <el-tree
          :data="deptOptions"
          :props="defaultProps"
          :expand-on-click-node="false"
          :filter-node-method="filterNode"
          ref="tree"
          node-key="id"
          default-expand-all
          highlight-current
          @node-click="handleNodeClick"
        />
      </div>
      <div
        :class="isAssociation ? 'shadowShell spShell' : 'shadowShell rightBox'"
      >
        <div class="search-box">
          <el-form :model="queryParams" ref="queryForm" size="small" label-width="120px">
            <el-row :gutter="24">
              <el-col :span="8">
                <el-form-item label="客户名称" prop="materialNum">
                  <el-input
                    v-model="queryParams.materialNum"
                    placeholder="请输入客户名称"
                    clearable
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="客户编码" prop="materialNum">
                  <el-input
                    v-model="queryParams.materialNum"
                    placeholder="请输入客户编码"
                    clearable
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="商品编码" prop="materialNum">
                  <el-input
                    v-model="queryParams.materialNum"
                    placeholder="请输入商品编码"
                    clearable
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="商品名称" prop="materialNum">
                  <el-input
                    v-model="queryParams.materialNum"
                    placeholder="请输入商品名称"
                    clearable
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="物料编码" prop="materialNum">
                  <el-input
                    v-model="queryParams.materialNum"
                    placeholder="请输入物料编码"
                    clearable
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="物料名称" prop="materialNum">
                  <el-input
                    v-model="queryParams.materialNum"
                    placeholder="请输入物料名称"
                    clearable
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="商品产品线" prop="materialNum">
                  <el-input
                    v-model="queryParams.materialNum"
                    placeholder="请输入商品产品线"
                    clearable
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="产品分类" prop="materialNum">
                  <el-input
                    v-model="queryParams.materialNum"
                    placeholder="请输入产品分类"
                    clearable
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="商品种属" prop="materialNum">
                  <el-input
                    v-model="queryParams.materialNum"
                    placeholder="请输入商品种属"
                    clearable
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="商品大类" prop="materialNum">
                  <el-input
                    v-model="queryParams.materialNum"
                    placeholder="请输入商品大类"
                    clearable
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="生产基地" prop="materialNum">
                  <el-input
                    v-model="queryParams.materialNum"
                    placeholder="请输入生产基地"
                    clearable
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="商品类别" prop="materialNum">
                  <el-input
                    v-model="queryParams.materialNum"
                    placeholder="请输入商品类别"
                    clearable
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="种类（按用途）" prop="materialNum">
                  <el-input
                    v-model="queryParams.materialNum"
                    placeholder="请输入种类（按用途）"
                    clearable
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="是否赠品" prop="materialNum">
                  <el-input
                    v-model="queryParams.materialNum"
                    placeholder="请输入是否赠品"
                    clearable
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="是否定制" prop="materialNum">
                  <el-input
                    v-model="queryParams.materialNum"
                    placeholder="请输入是否定制"
                    clearable
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="上市日期" prop="materialNum">
                  <el-input
                    v-model="queryParams.materialNum"
                    placeholder="请输入上市日期"
                    clearable
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="创建日期" prop="materialNum">
                  <el-input
                    v-model="queryParams.materialNum"
                    placeholder="请输入创建日期"
                    clearable
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item>
                  <el-button type="primary">搜索</el-button>
                  <el-button>重置</el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <div class="table">
          <el-button type="primary">添加商品</el-button>
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="全部" name="all">
              <el-table
                :data="tableData"
                style="width: 100%"
                border
                header-align="center"
                :header-cell-style="styleFunc"
                :cell-class-name="cellClassName"
              >
                <el-table-column fixed align="center" type="index" width="50"/>
                <el-table-column align="center"prop="date" label="客户名称" width="180"/>
                <el-table-column align="center" prop="date" label="客户编码" width="180"/>
                <el-table-column align="center" prop="date" label="商品编码" width="180"/>
                <el-table-column align="center" prop="date" label="商品名称" width="180">
                  <template slot-scope="scope">
                    <el-button size="mini" type="text">查看</el-button>
                  </template>
                </el-table-column>
                <el-table-column align="center" prop="date" label="商品图片" width="180">
                  <el-image style="width: 100px; height: 100px" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" fit="fill"></el-image>
                </el-table-column>
                <el-table-column align="center" prop="date" label="客户名称" width="180"/>
                <el-table-column align="center" prop="date" label="规格" width="180"/>
                <el-table-column align="center" prop="date" label="型号" width="180"/>
                <el-table-column align="center" prop="date" label="商品产品线" width="180"/>
                <el-table-column align="center" prop="date" label="商品种属" width="180"/>
                <el-table-column align="center" prop="date" label="商品类别" width="180"/>
                <el-table-column align="center" prop="date" label="商品大类" width="180"/>
                <el-table-column align="center" prop="date" label="产品分类" width="180"/>
                <el-table-column align="center" prop="date" label="生产基地" width="180"/>
                <el-table-column align="center" prop="date" label="种类（按用途)" width="180"/>
                <el-table-column align="center" prop="date" label="是否赠品" width="180"/>
                <el-table-column align="center" prop="date" label="是否定制" width="180"/>
                <el-table-column align="center" prop="date" label="销售单位" width="180"/>
                <el-table-column align="center" prop="date" label="主单价（出厂价）" width="180"/>
                <el-table-column align="center" prop="date" label="销售基价" width="180"/>
                <el-table-column align="center" prop="date" label="允销单价（药:箱/苗:瓶）" width="180"/>
                <el-table-column align="center" prop="date" label="状态" width="180"/>
                <el-table-column align="center" prop="date" label="上市日期" width="180"/>
                <el-table-column align="center" prop="date" label="创建日期" width="180"/>
                <el-table-column align="center" fixed="right" prop="date" label="操作" width="180">
                  <template slot-scope="scope">
                    <el-button size="mini" type="text">查看</el-button>
                    <el-button size="mini" type="text">缓存</el-button>
                    <el-button size="mini" type="text">编辑</el-button>
                    <el-button size="mini" type="text">变更</el-button>
                    <el-button size="mini" type="text" style="color:red">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <div style="text-align: center;margin-top: 10px">
                <el-pagination
                  background
                  layout="prev, pager, next"
                  :total="1000">
                </el-pagination>
              </div>
            </el-tab-pane>
            <el-tab-pane label="待提交" name="todoList">
              <el-table
                :data="tableData"
                style="width: 100%"
                border
                header-align="center"
                :header-cell-style="styleFunc"
                :cell-class-name="cellClassName"
              >
                <el-table-column fixed align="center" type="index" width="50"/>
                <el-table-column align="center"prop="date" label="客户名称" width="180"/>
                <el-table-column align="center" prop="date" label="客户编码" width="180"/>
                <el-table-column align="center" prop="date" label="商品编码" width="180"/>
                <el-table-column align="center" prop="date" label="商品名称" width="180">
                  <template slot-scope="scope">
                    <el-button size="mini" type="text">查看</el-button>
                  </template>
                </el-table-column>
                <el-table-column align="center" prop="date" label="商品图片" width="180">
                  <el-image style="width: 100px; height: 100px" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" fit="fill"></el-image>
                </el-table-column>
                <el-table-column align="center" prop="date" label="客户名称" width="180"/>
                <el-table-column align="center" prop="date" label="规格" width="180"/>
                <el-table-column align="center" prop="date" label="型号" width="180"/>
                <el-table-column align="center" prop="date" label="商品产品线" width="180"/>
                <el-table-column align="center" prop="date" label="商品种属" width="180"/>
                <el-table-column align="center" prop="date" label="商品类别" width="180"/>
                <el-table-column align="center" prop="date" label="商品大类" width="180"/>
                <el-table-column align="center" prop="date" label="产品分类" width="180"/>
                <el-table-column align="center" prop="date" label="生产基地" width="180"/>
                <el-table-column align="center" prop="date" label="种类（按用途)" width="180"/>
                <el-table-column align="center" prop="date" label="是否赠品" width="180"/>
                <el-table-column align="center" prop="date" label="是否定制" width="180"/>
                <el-table-column align="center" prop="date" label="销售单位" width="180"/>
                <el-table-column align="center" prop="date" label="主单价（出厂价）" width="180"/>
                <el-table-column align="center" prop="date" label="销售基价" width="180"/>
                <el-table-column align="center" prop="date" label="允销单价（药:箱/苗:瓶）" width="180"/>
                <el-table-column align="center" prop="date" label="状态" width="180"/>
                <el-table-column align="center" prop="date" label="上市日期" width="180"/>
                <el-table-column align="center" prop="date" label="创建日期" width="180"/>
                <el-table-column align="center" fixed="right" prop="date" label="操作" width="180">
                  <template slot-scope="scope">
                    <el-button size="mini" type="text">查看</el-button>
                    <el-button size="mini" type="text">缓存</el-button>
                    <el-button size="mini" type="text">编辑</el-button>
                    <el-button size="mini" type="text">变更</el-button>
                    <el-button size="mini" type="text" style="color:red">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <div style="text-align: center;margin-top: 10px">
                <el-pagination
                  background
                  layout="prev, pager, next"
                  :total="1000">
                </el-pagination>
              </div>
            </el-tab-pane>
            <el-tab-pane label="审核中" name="checking">
              <el-table
                :data="tableData"
                style="width: 100%"
                border
                header-align="center"
                :header-cell-style="styleFunc"
                :cell-class-name="cellClassName"
              >
                <el-table-column fixed align="center" type="index" width="50"/>
                <el-table-column align="center"prop="date" label="客户名称" width="180"/>
                <el-table-column align="center" prop="date" label="客户编码" width="180"/>
                <el-table-column align="center" prop="date" label="商品编码" width="180"/>
                <el-table-column align="center" prop="date" label="商品名称" width="180">
                  <template slot-scope="scope">
                    <el-button size="mini" type="text">查看</el-button>
                  </template>
                </el-table-column>
                <el-table-column align="center" prop="date" label="商品图片" width="180">
                  <el-image style="width: 100px; height: 100px" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" fit="fill"></el-image>
                </el-table-column>
                <el-table-column align="center" prop="date" label="客户名称" width="180"/>
                <el-table-column align="center" prop="date" label="规格" width="180"/>
                <el-table-column align="center" prop="date" label="型号" width="180"/>
                <el-table-column align="center" prop="date" label="商品产品线" width="180"/>
                <el-table-column align="center" prop="date" label="商品种属" width="180"/>
                <el-table-column align="center" prop="date" label="商品类别" width="180"/>
                <el-table-column align="center" prop="date" label="商品大类" width="180"/>
                <el-table-column align="center" prop="date" label="产品分类" width="180"/>
                <el-table-column align="center" prop="date" label="生产基地" width="180"/>
                <el-table-column align="center" prop="date" label="种类（按用途)" width="180"/>
                <el-table-column align="center" prop="date" label="是否赠品" width="180"/>
                <el-table-column align="center" prop="date" label="是否定制" width="180"/>
                <el-table-column align="center" prop="date" label="销售单位" width="180"/>
                <el-table-column align="center" prop="date" label="主单价（出厂价）" width="180"/>
                <el-table-column align="center" prop="date" label="销售基价" width="180"/>
                <el-table-column align="center" prop="date" label="允销单价（药:箱/苗:瓶）" width="180"/>
                <el-table-column align="center" prop="date" label="状态" width="180"/>
                <el-table-column align="center" prop="date" label="上市日期" width="180"/>
                <el-table-column align="center" prop="date" label="创建日期" width="180"/>
                <el-table-column align="center" fixed="right" prop="date" label="操作" width="180">
                  <template slot-scope="scope">
                    <el-button size="mini" type="text">查看</el-button>
                    <el-button size="mini" type="text">缓存</el-button>
                    <el-button size="mini" type="text">编辑</el-button>
                    <el-button size="mini" type="text">变更</el-button>
                    <el-button size="mini" type="text" style="color:red">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <div style="text-align: center;margin-top: 10px">
                <el-pagination
                  background
                  layout="prev, pager, next"
                  :total="1000">
                </el-pagination>
              </div>
            </el-tab-pane>
            <el-tab-pane label="已通过" name="pass">
              <el-table
                :data="tableData"
                style="width: 100%"
                border
                header-align="center"
                :header-cell-style="styleFunc"
                :cell-class-name="cellClassName"
              >
                <el-table-column fixed align="center" type="index" width="50"/>
                <el-table-column align="center"prop="date" label="客户名称" width="180"/>
                <el-table-column align="center" prop="date" label="客户编码" width="180"/>
                <el-table-column align="center" prop="date" label="商品编码" width="180"/>
                <el-table-column align="center" prop="date" label="商品名称" width="180">
                  <template slot-scope="scope">
                    <el-button size="mini" type="text">查看</el-button>
                  </template>
                </el-table-column>
                <el-table-column align="center" prop="date" label="商品图片" width="180">
                  <el-image style="width: 100px; height: 100px" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" fit="fill"></el-image>
                </el-table-column>
                <el-table-column align="center" prop="date" label="客户名称" width="180"/>
                <el-table-column align="center" prop="date" label="规格" width="180"/>
                <el-table-column align="center" prop="date" label="型号" width="180"/>
                <el-table-column align="center" prop="date" label="商品产品线" width="180"/>
                <el-table-column align="center" prop="date" label="商品种属" width="180"/>
                <el-table-column align="center" prop="date" label="商品类别" width="180"/>
                <el-table-column align="center" prop="date" label="商品大类" width="180"/>
                <el-table-column align="center" prop="date" label="产品分类" width="180"/>
                <el-table-column align="center" prop="date" label="生产基地" width="180"/>
                <el-table-column align="center" prop="date" label="种类（按用途)" width="180"/>
                <el-table-column align="center" prop="date" label="是否赠品" width="180"/>
                <el-table-column align="center" prop="date" label="是否定制" width="180"/>
                <el-table-column align="center" prop="date" label="销售单位" width="180"/>
                <el-table-column align="center" prop="date" label="主单价（出厂价）" width="180"/>
                <el-table-column align="center" prop="date" label="销售基价" width="180"/>
                <el-table-column align="center" prop="date" label="允销单价（药:箱/苗:瓶）" width="180"/>
                <el-table-column align="center" prop="date" label="状态" width="180"/>
                <el-table-column align="center" prop="date" label="上市日期" width="180"/>
                <el-table-column align="center" prop="date" label="创建日期" width="180"/>
                <el-table-column align="center" fixed="right" prop="date" label="操作" width="180">
                  <template slot-scope="scope">
                    <el-button size="mini" type="text">查看</el-button>
                    <el-button size="mini" type="text">缓存</el-button>
                    <el-button size="mini" type="text">编辑</el-button>
                    <el-button size="mini" type="text">变更</el-button>
                    <el-button size="mini" type="text" style="color:red">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <div style="text-align: center;margin-top: 10px">
                <el-pagination
                  background
                  layout="prev, pager, next"
                  :total="1000">
                </el-pagination>
              </div>
            </el-tab-pane>
            <el-tab-pane label="未通过" name="nopass">
              <el-table
                :data="tableData"
                style="width: 100%"
                border
                header-align="center"
                :header-cell-style="styleFunc"
                :cell-class-name="cellClassName"
              >
                <el-table-column fixed align="center" type="index" width="50"/>
                <el-table-column align="center"prop="date" label="客户名称" width="180"/>
                <el-table-column align="center" prop="date" label="客户编码" width="180"/>
                <el-table-column align="center" prop="date" label="商品编码" width="180"/>
                <el-table-column align="center" prop="date" label="商品名称" width="180">
                  <template slot-scope="scope">
                    <el-button size="mini" type="text">查看</el-button>
                  </template>
                </el-table-column>
                <el-table-column align="center" prop="date" label="商品图片" width="180">
                  <el-image style="width: 100px; height: 100px" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" fit="fill"></el-image>
                </el-table-column>
                <el-table-column align="center" prop="date" label="客户名称" width="180"/>
                <el-table-column align="center" prop="date" label="规格" width="180"/>
                <el-table-column align="center" prop="date" label="型号" width="180"/>
                <el-table-column align="center" prop="date" label="商品产品线" width="180"/>
                <el-table-column align="center" prop="date" label="商品种属" width="180"/>
                <el-table-column align="center" prop="date" label="商品类别" width="180"/>
                <el-table-column align="center" prop="date" label="商品大类" width="180"/>
                <el-table-column align="center" prop="date" label="产品分类" width="180"/>
                <el-table-column align="center" prop="date" label="生产基地" width="180"/>
                <el-table-column align="center" prop="date" label="种类（按用途)" width="180"/>
                <el-table-column align="center" prop="date" label="是否赠品" width="180"/>
                <el-table-column align="center" prop="date" label="是否定制" width="180"/>
                <el-table-column align="center" prop="date" label="销售单位" width="180"/>
                <el-table-column align="center" prop="date" label="主单价（出厂价）" width="180"/>
                <el-table-column align="center" prop="date" label="销售基价" width="180"/>
                <el-table-column align="center" prop="date" label="允销单价（药:箱/苗:瓶）" width="180"/>
                <el-table-column align="center" prop="date" label="状态" width="180"/>
                <el-table-column align="center" prop="date" label="上市日期" width="180"/>
                <el-table-column align="center" prop="date" label="创建日期" width="180"/>
                <el-table-column align="center" fixed="right" prop="date" label="操作" width="180">
                  <template slot-scope="scope">
                    <el-button size="mini" type="text">查看</el-button>
                    <el-button size="mini" type="text">缓存</el-button>
                    <el-button size="mini" type="text">编辑</el-button>
                    <el-button size="mini" type="text">变更</el-button>
                    <el-button size="mini" type="text" style="color:red">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <div style="text-align: center;margin-top: 10px">
                <el-pagination
                  background
                  layout="prev, pager, next"
                  :total="1000">
                </el-pagination>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import customInfoDrawer from "@/components/customerManage/customInfoDrawer/index.vue";
import addDialog from "@/components/DialogCustom/addDialog.vue";
import sceneDialog from "@/components/DialogCustom/sceneDialog.vue";
import seaDialog from "@/components/DialogCustom/seaDialog.vue";
import clueTable from "@/components/clueManage/clues/clueTable";
import TableHeaderFilters from "@/components/FieldFilters/TableHeaderFilters";
//全局导入
import GlobalImport from "@/components/GlobalImportExport/GlobalImport.vue";
//全局导出
import GlobalExport from "@/components/GlobalImportExport/GlobalExport.vue";
import {deptTreeSelect} from "@/api/system/user";

export default {
  components: {
    customInfoDrawer,
    addDialog,
    clueTable,
    sceneDialog,
    TableHeaderFilters,
    seaDialog,
    GlobalImport,
    GlobalExport,
  },
  mixins: [],
  props: {
    isAssociation: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      deptOptions: undefined,// 部门树选项
      defaultProps: {
        children: "children",
        label: "label"
      },
      queryParams: {},
      loading: true,
      activeName: 'all',//tab
      tableData: [{},{}],//表格数据
    };
  },
  created() {
    this.getDeptTree();
  },
  methods: {
    /** 查询部门下拉树结构 */
    getDeptTree() {
      deptTreeSelect().then(response => {
        this.deptOptions = response.data;
      });
    },
    // 筛选节点
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    handleNodeClick() {
    },
    // 切换tab
    handleClick() {
    },
    styleFunc({row, column, rowIndex, columnIndex}) {
      return "background:#f4f4f4;text-align:center"
    },
    cellClassName({row, column, rowIndex, columnIndex}) {
      return "text-align:center"
    }
  },
};
</script>
<style lang="scss" scoped>
@import "@/assets/styles/custom-tab-serch.scss";
@import "@/assets/styles/pageStyle.scss";

.mainBox {
  display: flex;

  .leftBox {
    width: 200px;
    margin-right: 10px;
    height: calc(100vh - 160px);
    padding: 20px;
    background-color: white;
  }

  .rightBox {
    flex: 1;
  }
}

.spShell {
  height: initial !important;
}

.app-container {
  height: calc(100vh - 180px);
}

.shadowShell {
  height: calc(100vh - 160px);
  background-color: #ffffff;
  overflow-y: auto;
}

.customer-management-wrap {
  background-color: #f5f6fa;

  // .f14{
  //     font-size: 14px;
  // }
  .page-header {
    .page-title {
      display: flex;
      align-items: center;

      .title-icon {
        color: #42526e;
        cursor: pointer;
        margin-left: 4px;
        font-size: 16px;
      }
    }

    .header-right {
      .more {
        margin-left: 8px;
      }
    }
  }

  .regular-row {
    display: flex;
    flex-direction: row;
    text-align: left;
    align-items: center;
    width: 100%;

    .search-input {
      width: 200px;
    }

    .options-wrap {
      margin-left: 24px;
      display: flex;
      flex: 1;
      overflow-x: auto;
      white-space: nowrap;
      align-items: center;

      .options-label {
        margin-right: 8px;
      }
    }
  }

  .activeScene {
    color: #fff;
    background-color: #344563;
  }

  .senior-scene {
    margin-top: 8px;
    padding: 16px;
    box-shadow: 0 4px 8px -2px rgba(9, 30, 66, 0.25),
    0 0 1px rgba(9, 30, 66, 0.31);

    .senior-scene-title {
      color: #5e6c84;
    }

    .senior-scene-btn-wrap {
      margin-top: 10px;
    }
  }
}

.table {
  padding: 20px
}
</style>
